<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="web.graficos.Graficos"%>
<%@page import="web.graficos.GraficosFactory"%>
<%@page import="bean.jugador.Jugador"%>
<%@page import="bean.Arma"%>
<%@page import="logic.Filtro"%>
<%@page import="web.URLHelper"%>
<%@page import="logic.Buscador"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
    Jugador jugador1 = Buscador.jugadorPorApodo(request.getParameter("nombre1"));
    Jugador jugador2 = Buscador.jugadorPorApodo(request.getParameter("nombre2"));
    Graficos graficos = GraficosFactory.getGraficos(true);
    List<Jugador> jugadores = new ArrayList<Jugador>();
    jugadores.add(jugador1);
    jugadores.add(jugador2);

%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="<%=URLHelper.getCSSURL()%>" rel="stylesheet">
        <title>InfArena <%=jugador1.getDatos().getNombre()%> vs <%=jugador2.getDatos().getNombre()%></title>
    </head>
    <body class="body_class">
        <a href="<%=URLHelper.rootFolder%>">
            Inicio
        </a>
        <br/>
        <span class="mw-headline">Muertes arma a arma</span>

        <table>
            <tr>
                <td style="text-align:center; border-bottom: 1px solid;">
                    <a href="<%=URLHelper.getURL(jugador1)%>">
                        <img style="width: 128px; height: 128px;" alt="<%=jugador1.getDatos().getNombre()%>" src="<%=URLHelper.getImageURL(jugador1)%>" />
                    </a>
                    <br/>
                    <%=jugador1.getDatos().getNombre()%>
                </td>
                <td class="all_center_big_noborder">
                    vs
                </td>
                <td style="text-align:center; border-bottom: 1px solid;">
                    <a href="<%=URLHelper.getURL(jugador2)%>">
                        <img style="width: 128px; height: 128px;" alt="<%=jugador2.getDatos().getNombre()%>" src="<%=URLHelper.getImageURL(jugador2)%>" />
                    </a>
                    <br/>
                    <%=jugador2.getDatos().getNombre()%>
                </td>
            </tr>
            <%
                for (Arma arma : Buscador.getArmas()) {
            %>
            <tr>
                <td class="all_center_big">
                    <%=Filtro.cantidadMuertesJugadorAJugadorConArma(jugador1, jugador2, arma)%>
                </td>
                <td style="text-align:center;">
                    <a href="<%=URLHelper.getURL(arma)%>">
                        <img style="width: 128px; height: 80px;" alt="<%=arma.getNombre()%>" src="<%=URLHelper.getImageURL(arma)%>" />
                    </a>
                    <br/>
                    <%=arma.getNombre()%>
                </td>

                <td class="all_center_big">
                    <%=Filtro.cantidadMuertesJugadorAJugadorConArma(jugador2, jugador1, arma)%>
                </td>
            </tr>
            <% }%>
            <tr>
                <td class="all_center_big">
                    <%=Filtro.cantidadMuertesJugadorAJugador(jugador1, jugador2)%>
                </td>
                <td class="all_center_big_noborder">
                    Total
                </td>

                <td class="all_center_big">
                    <%=Filtro.cantidadMuertesJugadorAJugador(jugador2, jugador1)%>
                </td>
            </tr>
        </table>
        <div id="chart_historia_puntos" class="chart"></div>

        <script type="text/javascript" src="<%=URLHelper.jsFolder + "/google_jsapi.js"%>"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Juego','Diferencia'],
            <%=graficos.matrixVersusJugadores(jugador1, jugador2,Buscador.getListaJuegos())%>
                    ]);

                    var options = {
                        title: 'Historico Versus',
                        curveType: 'function'
                    };

                    var chart = new google.visualization.LineChart(document.getElementById('chart_historia_puntos'));
                    chart.draw(data, options);
                }
        </script>
    </body>
</html>
